<template>
  <section class="profile_info_change">
    <!--利用$router.back()返回上一级路由 -->
    <HeaderTop title="信息修改">
      <a href="javascript:" slot="left" class="go_back" @click="$router.goBack()">
        <i class="iconfont iconxiazai6"></i>返回
      </a>
    </HeaderTop>

    <!--个人信息修改-->
    <div class="profile_info_change_field">
      <label for="fileInput">
        <mt-cell :title="stuImg" is-link>
          <!--<img :src="stuImgSrc" class="profile_img" v-if="userInfo.sno">-->
          <!--<img src="../../common/imgs/profile.jpg" class="profile_img" v-else>-->
          <img :src="stuImgSrc ? stuImgSrc : require('../../common/imgs/profile.jpg')" class="profile_img">
        </mt-cell>
      </label>
      <input v-show="false" type="file" id="fileInput" class="img_file"
             accept="image/jpeg,image/jpg,image/png,image/gif" @change="getImgFile" ref="imgFile">
      <mt-cell title="姓名" :value="stuName" is-link @click.native="changeName"></mt-cell>
      <mt-cell title="姓别" :value="stuSex" is-link @click.native="changeSex"></mt-cell>
      <mt-cell title="邮箱" :value="stuEmail" is-link @click.native="changeEmail"></mt-cell>
      <mt-cell title="手机号" :value="stuPhone" is-link @click.native="changePhone"></mt-cell>
      <mt-button type="primary" size="large" @click.native="changeInfo">保存修改</mt-button>
    </div>

  </section>
</template>

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
  import {Toast, MessageBox } from 'mint-ui'
  import {mapState} from 'vuex'
  import {reqInfoChange, reqUserInfoBySno} from '../../api'
  export default {
    name: "",
    data() {
      return {
        stuImg:'点击上传头像',
        stuImgSrc:this.$store.state.userInfo.stuImgSrc,
        stuName:this.$store.state.userInfo.stuName,
        stuSex:this.$store.state.userInfo.stuSex,
        stuEmail:this.$store.state.userInfo.stuEmail,
        stuPhone:this.$store.state.userInfo.stuPhone,
        tempImgSrc:this.$store.state.userInfo.stuImgSrc
      }
    },
    methods: {
      changeName(){
        MessageBox.prompt('修改姓名','',{inputValue: this.stuName,
          inputValidator:function(v){return v !== '';},
          inputErrorMessage:'姓名不能为空'}).then(({ value, action }) => {
          this.stuName = value;
        },() => {});
      },
      changeSex(){
        MessageBox.prompt('修改姓别','',{inputValue: this.stuSex,
          inputValidator:function(v){return v == '男' || v == '女';},
          inputErrorMessage:'请输入男或者女'}).then(({ value, action }) => {
          this.stuSex = value;
        },() => {});
      },
      changeEmail(){
        MessageBox.prompt('修改邮箱','',{inputValue: this.stuEmail,
          inputValidator:function(v){return /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v);},
          inputErrorMessage:'请输入正确的邮箱'}).then(({ value, action }) => {
          this.stuEmail = value;
        },() => {});
      },
      changePhone(){
        MessageBox.prompt('修改手机号','',{inputValue: this.stuPhone,
          inputValidator:function(v){return /^1[34578]\d{9}$/.test(v);},
          inputErrorMessage:'请输入正确的手机号'}).then(({ value, action }) => {
          this.stuPhone = value;
        },() => {});
      },
      async changeInfo(){
        // 声明一个FormData对象，有file以表单方式发送请求
        var formData = new window.FormData();
        const {stuName, stuSex, stuEmail, stuPhone} = this;
        var stuImgSrc = this.$refs.imgFile.files[0];
        if (typeof stuImgSrc !== 'undefined' && stuImgSrc.size > 4194304) {
          // console.log(stuImgSrc.size)
          Toast({
            message: '请选择4M以内的图片',
            duration: 1500
          });
        } else {
          formData.append('stuImgSrc',stuImgSrc);
          formData.append('stuName',this.stuName);
          formData.append('stuSex',this.stuSex);
          formData.append('stuEmail',this.stuEmail);
          formData.append('stuPhone',this.stuPhone);
          formData.append('sno',this.$store.state.userInfo.sno);
          // console.log(formData.get('stuImgSrc'))
          let result = await reqInfoChange(formData);
          if (result.statu == 0){
            var user = result.data;
            // console.log(this.tempImgSrc)
            user.stuImgSrc = this.tempImgSrc;
            this.$store.dispatch('recordUser', user);
            //更新sessionStorage中userInfo
            sessionStorage.setItem("userInfo",JSON.stringify(user));
            Toast({
              message: result.msg,
              iconClass: 'iconfont iconunie045',
              duration: 1500
            });
            this.$router.push('/profile');
          }
          else if (result.msg == '会话失效，请重新登录') {
            MessageBox.confirm('会话失效，是否重新登录？').then(action => {
              //点击确定按钮操作
              //清空sessionStorage会话
              sessionStorage.clear();
              // 请求退出
              this.$store.dispatch('logout');
              Toast('请重新登录系统');
              this.$router.push('/login')
            }, () => {
              //点击取消按钮操作
            })
          }
          else {
            Toast({
              message: result.msg,
              position: 'bottom',
              duration: 1500
            });
          }
        }
      },
      getImgFile(){
        if (typeof this.$refs.imgFile.files[0] === 'undefined') {
          Toast({
            message: '若无法上传头像，可能是由于微信内置浏览器暂不支持Android版上传文件，请点击右上角选择其他浏览器打开',
            iconClass: 'iconfont iconxinxi',
            duration: 4000
          });
        }
        if (this.$refs.imgFile.value) {
          var _self = this;
          this.stuImg = '头像路径：' + this.$refs.imgFile.value;
          //前端实现上传头像预览
          var fileObj = this.$refs.imgFile;
          var file = fileObj.files[0];
          var fReader = new FileReader();
          fReader.readAsDataURL(file);
          fReader.onload = function () {
            _self.tempImgSrc = this.result;
            _self.stuImgSrc = this.result;
          }
        }
/*        else {
          this.stuImg = '点击上传头像';
          this.stuImgSrc = ''
        }*/
      }
    },
    components:{
      HeaderTop
    },
    computed:{
      ...mapState(['userInfo'])
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  .profile_info_change
    padding-top 45px
    .profile_info_change_field
      .profile_img
        width 24px
        height 24px
        border-radius 50%
      .mint-button
          background-color #4ab8a1
          margin-top 15px
      .img_file
        width 60%
        background-color #fff
        position absolute
        top 55px
        left 70px
</style>
